<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    //定义一个函数，专门用来为指定元素绑定单击响应函数
    //里面涉及的参数：
    //idStr:要绑定单击响应函数的对象的id属性值
    //fun:事件的回调函数，当单击元素时，该函数将会被触发
    function myClick(idStr,fun)
    {
        var btn=document.getElementById(idStr);
        btn.onclick=fun;
    }

    window.onload=function()
    {
    //为id为btn07的按钮绑定一个单击响应函数
    myClick("btn07",function()
    {
        //获取id为timetable的节点
        var yingyu=document.getElementById("yingyu");
        //返回timetable的父节点
        var pn=yingyu.parentNode;
        console.log(pn.innerHTML);
        console.log(pn.innerText);
        //innerHTML和innerText都会提取文本
        //不同的是Text会自动将标签去掉，而HTML会保留标签
    }
    );

    //为id为btn08的按钮绑定一个单击响应函数
    myClick("btn08",function()
    {
        //获取id为android的元素
        var add=document.getElementById("android");
        
        //返回#android的前一个兄弟节点
        //此属性会让空白文本也默认成为一个兄弟节点
        var aps=add.previousSibling;
        alert(aps.innerText);
        
        //此属性会返回上一个兄弟元素，无事其中的空白文档，但是IEM8及以下不支持
        var apes=add.previousElementSibling;
        alert(apes.innerText);
        
        //此属性会返回当前节点的下一个兄弟节点
        //但是此属性也同样会让空白文本默认成为一个兄弟节点
        var ans=add.nextSibling;
        alert(ans.innerText);

        //此属性会返回当前节点的下一个兄弟节点
        //但此属性会无视其中的空白文档,IE8及以下不支持
        var anes=add.nextElementSibling;
        alert(anes.innerText);
    }    
    );

    //读取id为username的value属性值
    myClick("btn09",function()
    {
        //获取id为username的元素
        var un=document.getElementById("username");
        //读取um的value属性值
        alert(un.value);
        //文本框个的value属性值，就是文本框中填写的内容
    }
    );

    //设置username的value属性值
    myClick("btn10",function()
    {
        //获取id为username的元素
        var un=document.getElementById("username");
        //给un的value设置属性值
        un.value="Your Mother Fucker"
    }
    );

    //返回bj的文本值
    myClick("btn11",function()
    {
        //获取id为bj的元素
        var bj=document.getElementById("bj");
        console.log(bj.innerHTML);

        //获取bj中的文本节点
        var fc=bj.firstChild
        console.log(fc.nodeValue);//文本节点的属性值就是文本本身
        console.log(fc);
        console.log(bj.firstChild.nodeValue);
    }
    );

    };
    </script>
</head>
<body>
    <ul id="ttb">
        <li id="yingyu">英语课</li>
        <li id="bj">语文课</li>
        <li>数学课</li>
        <li>物理课</li>
    </ul>

    <ul id="phone">
        <li>IOS</li>
        <li id="android">Android</li>
        <li>Windows Phone</li>
    </ul>
    <button id="btn07">查找功能七</button>
    <button id="btn08">查找功能八</button>
    <button id="btn09">查找功能九</button>
    <button id="btn10">查找功能十</button>
    <button id="btn11">查找功能十一</button>
    <input type="text" name="name" id="username" value="abcde">
</body>
</html>